<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #root {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        flex-wrap: wrap;
      }
    </style>
    <script src="../js/vue.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- 
        v-html指令:
        1.作用:向指定节点中渲染包含html结构的内容
        2.与插值语法的区别:
            (1).v-html会替换掉指定元素中所有的内容,{{xxx}}则不会
            (2).v-html可以识别html结构
        3.严重注意:在网站上动态渲染任意html是非常危险的,容易导致xss攻击,一定要确保安全的情况下再使用v-html指令
        4.注意:在组件中使用v-html指令,需要使用$refs来获取组件的实例对象
     -->
    <div id="root">
      <div>你好,{{name}}</div>
      <!-- v-text会将属性中的内容当作普通字符串渲染 -->
      <div v-text="str"></div>
      <!-- v-html会解析字符串中的html结构 -->
      <div v-html="str"></div>
    </div>

    <script type="text/javascript">
      new Vue({
        el: "#root",
        data: {
          name: "Vue",
          str: "<h1>haha</h1>",
        },
      });
    </script>
  </body>
</html>
